<template>
  <div class="twopage">
    <div class="navs">
      <a-radio-group v-model="status" @change="callback">
        <a-radio :value="1">
          待返款
        </a-radio>
        <a-radio :value="2">
          可返款
        </a-radio>
      </a-radio-group>
      <div class="lines">
      </div>
    </div>
    <div class="goodsmain">
      <div class="scroll" @scroll="Scroll">
        <a-input class="searchipt" v-model="search" placeholder="搜索店铺查询" @blur="iptblur" @pressEnter="iptblur">
          <a-icon slot="prefix" type="search"/>
        </a-input>
        <div v-for="(v,k) in goodslist" :key="k">
          <div class="goodsli">
            <img :src="v.goods_url" alt="" style="width:146px;height:146px;border-radius: 8px;margin-right: 12px;">
            <div>
              <div class="line-2" style="margin-bottom: 15px;">
                {{ v.title }}
              </div>
              <div class="time" style="margin-bottom: 15px;">
                返款时间 {{ v.refund_time.slice(0, 11) }}
              </div>
              <div class="fukuan" style="margin-bottom:15px;">
                付款
                <span class="bold" style="font-size: 14px; padding: 0 5px;">{{ v.payment_price }}</span>
                元
              </div>
              <div class="money">
                <div class="">
                  返款
                  <span class="bold" style="padding: 0 5px;color: #ff5b00;font-size: 14px;">{{ v.refund_price }}</span>
                  元
                </div>
                <a :href="v.refund_url" v-if="v.status != '待返款'">
                  <div class="status">{{ v.status }}</div>
                </a>
                <a :href="v.refund_url" v-else>
                  <div class="elsestatus">{{ v.status }}</div>
                </a>
              </div>
            </div>
            <a-icon type="close" @click="dodel(v.id)"/>
          </div>
        </div>
        <div style="text-align: center;margin:8px 0;">
          <a-spin v-if="isloading === 'loading'">
            <a-icon slot="indicator" :type="isloading" style="font-size: 24px" spin/>
          </a-spin>
          <div v-else class="nomore">
            <div class="line1"></div>
            暂无更多
            <div class="line1"></div>
          </div>
        </div>
      </div>
      <div class="wxbox" @click="visible = true">
        <a-icon type="message" class="messageicon"/>
      </div>
    </div>
    <a-modal
      v-model="visible"
      :footer="null"
      :width="280"
      :closable="false"
      :maskClosable="true"
      :centered="true"
    >
      <div>
        <img src="http://img.letuilm.com/2020/12/c54f7b2020122313552537855.png" alt="" style="width:100%;height:100%">
        <div>有问题联系微信: xxxxxxxxxxxxx</div>
      </div>
    </a-modal>
  </div>
</template>
<script>
  import axios from 'axios'

  export default {
    name: 'Twopage',
    data () {
      return {
        visible: false,
        userid: '',
        isloading: 'loading',
        status: 1,
        search: '',
        activeurl: 'http://192.168.0.188:9010',
        goodslist: [
          {
            title: '返利商品标题', // 商品名称
            goods_url: 'http://img.letuilm.com/2020/09/9eb60b2020092817375098341.png', // 地址
            payment_price: '50.00', // 付款金额
            refund_price: '20.00', // 返款金额
            refund_url: 'http://img.letuilm.com/2020/09/9eb60b2020092817375098341.png', // 返款地址
            refund_time: '2020-12-18 10:09:32', // 返款时间
            status: '待返款' // 返款状态
          }
        ],
        flag: false,
        num: 1
      }
    },
    computed: {},
    created () {
      console.log(window.location.href)
      // const url = window.location.href
      const url = 'http://fan.ju-p.com/?sid=2'
      this.userid = this.getUrl(url, 'sid')
      this.getgoodslist(1, 15)
    },
    mounted () {

    },
    methods: {
      dodel (id) {
        const axiosurl = this.activeurl + '/rebate/del_goods'
        axios.get(axiosurl, { // get
          params: {
            id: id
          }
        }).then(res => {
          console.log(res.data)
          if (res.data.code === 200) {
            this.$message.success('删除成功!')
          } else {
            this.$message.error(res.data.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      Scroll (e) {
        console.log('触底')
        const ele = e.srcElement ? e.srcElement : e.target
        // 监听滚动到div底部
        if (ele.scrollTop + ele.offsetHeight > ele.scrollHeight - 30) {
          // console.log(ele.scrollTop, '+', ele.offsetHeight, '>', ele.scrollHeight - 30)
          this.isloading = 'loading' // 底部设置一个loading 开启加载动画
          if (this.flag === false) {
            // 避免多次请求 加锁 该次请求完成 才能再次发起请求
            this.flag = true
            // console.log(this.flag)
            this.num++
            this.getgoodslist(this.num, 15)
            // some   ajax
          } else {
          }
        }
      },

      iptblur () {
        console.log(this.search)
        this.goodslist = []
        this.getgoodslist(1, 15)
      },
      getUrl (urlstr, name) {
        console.log('urlstr', urlstr, 'name', name)
        const i = urlstr.indexOf('?')
        // console.log('i', i)
        if (i !== -1) {
          urlstr = urlstr.slice(i, urlstr.length) // ?id=xxxxx&a=xxx
          var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
          var r = urlstr.substr(1).match(reg)
          if (r != null) {
            return unescape(r[2])
          } else {
            return null
          }
        } else {
          return urlstr
        }
        // 使用 let id = this.getUrl(this.value,'id');//tips: id是string
      },
      getuserid () {

      },
      getgoodslist (page, pagesize) {
        const axiosurl = this.activeurl + '/rebate/api_goods_list'
        axios.get(axiosurl, { // get
          params: {
            page: page,
            pagesize: pagesize,
            user_id: this.userid,
            status: this.status,
            search: this.search
          }
        }).then(res => {
          console.log(res.data.data)
          this.num = parseInt(res.data.data.page)
          if (this.num === res.data.data.max_page || this.num > res.data.data.max_page) {
            this.isloading = 'none'
          }
          this.goodslist.push(...res.data.data.data)
          this.flag = false
        }).catch(err => {
          console.log(err)
        })
      },
      callback (key) {
        console.log(key)
        this.status = parseInt(key.target.value)
        this.goodslist = []
        this.getgoodslist(1, 15)
      }
    }
  }
</script>
<style lang='less' scoped>
  .twopage {
    position: relative;
    width: 375px;

    .navs::v-deep {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 44px;
      border-radius: 6px 6px 0 0;
      background-color: white;
      overflow: hidden;

      .ant-radio {
        display: none;
      }

      .ant-radio-group {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .ant-radio-wrapper {
        width: 50%;
        height: 44px;
        line-height: 44px;
        text-align: center;
      }

      .ant-radio-wrapper-checked {
        color: red;

        span {
          height: 42px;
          font-weight: 600;
          border-bottom: 2px solid red;
        }
      }
    }

    .goodsmain {
      padding-top: 44px;
      background-color: #F8F8F8;
      overflow: hidden;

      .scroll {
        width: 102%;
        height: 405px;
        overflow-y: auto;

      }

      .goodsli {
        display: flex;
        justify-content: space-between;
        background-color: #fff;
        border-radius: 6px;
        padding: 5px;

        .line-2 {
          -webkit-line-clamp: 2;
          overflow: hidden;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }

        .time {
          width: 175px;
          height: 20px;
          line-height: 20px;
          color: #fff;
          font-size: 12px;
          border-radius: 4px;
          text-align: left;
          padding: 0 7px;
          background: linear-gradient(45deg, #9000ff, #5e00ff);
        }

        .fukuan {
          width: 175px;
          height: 20px;
          line-height: 20px;
          color: #fff;
          font-size: 12px;
          border-radius: 4px;
          text-align: left;
          padding: 0 7px;
          background: linear-gradient(45deg, #ff9700, #ed1c24);
        }

        .money {
          display: flex;
          justify-content: space-between;
          width: 175px;
          height: 20px;
          line-height: 20px;
          background: #ffeee6;
          padding-left: 7px;
          overflow: hidden;
          font-size: 12px;
          border-top-right-radius: 25px;
          border-bottom-right-radius: 25px;

          .status {
            width: 61px;
            height: 24px;
            line-height: 21px;
            text-align: center;
            color: #ffffff;
            font-size: 12px;
            background-image: url('http://img.letuilm.com/2020/12/f44bb92020122310521185251.png');
            background-size: 100% 100%;
          }

          .elsestatus {
            width: 61px;
            height: 24px;
            line-height: 21px;
            text-align: center;
            color: #ffffff;
            font-size: 12px;
            border-top-right-radius: 25px;
            border-bottom-right-radius: 25px;
            background: #dfdfdf;
          }
        }
      }
    }

    .searchipt {
      padding: 10px;

      /deep/ .ant-input {
        border-radius: 25px;
      }

      /deep/ .ant-input-prefix {
        left: 21px !important;
      }
    }

    .wxbox {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      right: 0;
      bottom: 50px;
      box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);

      .messageicon {
        color: green;
        font-size: 18px;
      }
    }

    .nomore {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .line1 {
        width: 30%;
        height: 1px;
        background-color: #dfdfdf;
      }
    }
  }
</style>
